<template>
    <div style="height: 100vh; overflow: hidden">
        <div
            style="height: 50px; line-height: 50px; border-bottom: 2px solid var(--colorRed); padding-left: 50px; color: var(--colorRed)">
          <b style="font-size: 24px;">WEBLOG</b>
          <i style="margin-left :20px">-- 只为小白的你</i>
        </div>


        <div
            style="width: 50%; margin: 100px auto;border-redius:10px; box-shadow: 0 0 10px -2px cornflowerblue; display: flex;">

            <div style="flex: 1; padding: 100px 50px">
                <img src="../assets/imgs/登录日志.png" alt="" style="width: 100%;">
            </div>

            <div style="flex: 1; padding: 50px; padding-top: 30px;">
                <div class="form-toggle">
                    <b :class="{'active': activeToggle === 'phone'}" style="margin-left:50px" 
                        @click="toggle('phone')">游客注册</b>
                </div>

                <!-- 用户注册-->
                <el-form ref="form" :rules="rulesform" :model="registerForm">
                    <el-form-item prop="account">
                        <el-input size="medium" v-model="registerForm.account" prefix-icon="el-icon-user" placeholder="请输入账号" ></el-input>
                    </el-form-item>
                    <el-form-item prop="nickname">
                        <el-input size="medium" v-model="registerForm.nickname" prefix-icon="el-icon-s-custom" placeholder="请输入昵称" ></el-input>
                    </el-form-item>
                    <el-form-item prop="email">
                        <el-input size="medium" v-model="registerForm.email" prefix-icon="el-icon-s-promotion" placeholder="请输入邮箱" ></el-input>
                    </el-form-item>
                    <el-form-item prop="phone">
                        <el-input size="medium" v-model="registerForm.phone" prefix-icon="el-icon-phone" placeholder="请输入手机号"></el-input>
                    </el-form-item>
                    <el-form-item prop="emailcode">
                        <div style="display: flex;">
                            <!-- flex:2 占两份 -->
                            <el-input size="medium" style="flex: 2" v-model="registerForm.emailcode"
                                        prefix-icon="el-icon-circle-check" placeholder="请输入邮箱验证码"></el-input>
                            <el-button :disabled="second > 0" size="medium" style="flex: 1;margin-left: 5px" @click="sendEmail">点击发送
                                <span v-if="second > 0">({{ second }})</span></el-button>
                        </div>
                    </el-form-item>

                    <div>
                        <el-button type="primary" size="medium" style="width:100%" @click="register">注册</el-button>
                    </div>

                    <div style="margin:10px 0; text-align: right;">
                        <a href="/login" style="color:var(--colorRed)">已有账号？立即登录</a>
                    </div>
                </el-form>
            </div>
        </div>
    </div>
</template>


<script>
import request from '@/utils/request'
export default {
    name:"Register",
    data(){
        const checkPhone =(rule,value,callback) =>{
            if(!this.validatePhone.test(value)){
                return callback(new Error('手机号格式不合法'))
            }
            callback()
        }

        const checkSMS = (rule, value, callback) => {
            if(!/\d{6}/.test(value)) {
                return callback(new Error('验证码必须是数字且长度必须是6位'));
            }
            callback()
        }


        const checkEmail = (rule, value, callback) => {
            if(!this.validateEmail.test(value)) {
                return callback(new Error('邮箱格式不合法'));
            }
            callback()
        }



        return{
            registerForm: {},
            activeToggle: 'phone',
            second: 0,
            rulesform:{
                account:[
                    {required:true,message:"账号不能为空",trigger:'blur'}
                ],
                phone: [
                    { validator: checkPhone, trigger: 'blur' }
                ],
                emailCode: [
                    { validator: checkSMS, trigger: 'blur' }
                ],
                email:[
                    { validator: checkEmail, trigger:'blur'}
                ]
            },

            // 手机号正则
            validatePhone: /^1[3,4,5,6,7,8,9][0-9]{9}$/,
            // 邮箱正则
            validateEmail: /^\w+@[\da-z\.-]+\.([a-z]{2,6}|[\u2E80-\u9FFF]{2,3})$/,

            interval: null
        }
    },
    methods:{

        times(){
            // 防止点击太快 ，没来得及清理
            if(this.interval){
                clearInterval(this.interval)     
            }
            this.second = 30
            this.interval = setInterval(() => {   //如果不清理这个"线程会一直存在"，于是每次点击都会创建一个新的线程
                if(this.second > 0){
                    this.second--
                }else{
                    clearInterval(this.interval)   // 停止
                    this.interval = null

                }
            }, 1000)

        },


        sendEmail(){
            //校验是否合法
            if(!this.validateEmail.test(this.registerForm.email)) {
                this.$message.warning("邮箱格式不合法")
                return
            }
            request.get("/email",{
                params:{
                    email: this.registerForm.email,
                    type: "REGISTER"
                }
            }).then(res => {
                if(res.code === '200'){
                    this.$message.success("发送成功,有效期五分钟")
                    this.times()
                }else{
                    this.$message.error(res.msg)
                }
            })
        },


        register(){
            this.$refs["form"].validate((valid) => {
                if (valid) {
                    request.post("/register", this.registerForm).then(res => {
                        if (res.code === '200') {
                            this.$message.success('注册成功')
                            this.$router.push('/login')
                        } else {
                            this.$message.error(res.msg)
                        }
                    })
                }
            });
            
        }
    }
}
</script>


<style scoped>

.form-toggle {
    margin: 20px 0;
    padding-left: 50px;
    text-align: ceter;
}

.form-toggle b {
    font-size: 20px;
    cursor: pointer;
}

.active {
  color: var(--colorRed);
}
</style>


